<template>
    <div class="radioAnswer">
        <el-checkbox-group style="width: 100%;" v-model="current">
            <el-checkbox
                :disabled="isDisabled"
                :label="item1.question_answer_id + ''"
                @change="onchange"
                class="selectItemBox"
                v-for="(item1, index1) in answerList"
                :key="index1"
                :class="{
                    isSelectItemBox: answerId[item.question_answer_id]
                }"
                ><div class="selectItemBox-item">
                    <div>{{ currentLetter[index1] }}、</div>
                    <span v-html="item1.answer"></span></div
            ></el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        answerList: {
            type: Array
        },
        // input_value: {
        //     type: String
        // },
        // isChecked: {
        //     type: String
        // },
        isDisabled: {
            type: Boolean
        },
        answerLog: {
            type: String
        }
    },
    data() {
        return {
            idList: [],
            currentLetter: [],
            answerId: {}
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        let answerList = this.answerList;
        for (let i = 0; i < answerList.length; i++) {
            this.currentLetter.push(this.letter(i));
            this.$set(this.answerId, answerList[i].question_answer_id, false);
        }
    },
    methods: {
        onchange(e) {
            for (let item in this.answerId) {
                this.answerId[e] = e.indexOf(item) === -1 ? false : true;
            }
            this.$emit("getCheckArr", e);
        },
        letter(index) {
            return String.fromCharCode(index + 65);
        }
    }
};
</script>

<style lang="scss" scoped>
.selectItemBox {
    width: 100%;
    border: 1px solid #dadfe6;
    border-radius: 8px;
    padding: 10px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
    cursor: pointer;
    display: flex;

    &:hover {
        background-color: #f9f9f9;
    }
}

.isSelectItemBox {
    border: 1px solid #18db60;
}
.selectItemBox-item {
    display: flex;
    align-items: center;
}
</style>
